<template>
  <div class="pb-20">
    <!-- 顶部搜索栏 -->
    <div class="sticky top-0 bg-white z-200 shadow-sm">
      <div class="flex  justify-between p-4">
        <div class="flex ">
          <span class="font-medium mr-1">上海市</span>
          <i class="fa fa-chevron-down text-xs font-bold text-blue-500"></i>
        </div>
        <div class="flex-1 mx-4 relative">
          <input
              type="text"
              placeholder="搜索美食、商家"
              class="w-full py-2 px-4 pl-10 bg-gray-100 rounded-full text-sm focus:outline-none focus:ring-2 focus:ring-primary-500/50"
          >
          <i class="fa fa-search absolute left-3 top-1/2 -translate-y-1/2 text-gray-400"></i>
        </div>
        <div class="flex ">
          <i class="fa fa-bell-o text-lg"></i>
        </div>
      </div>
    </div>

    <!-- 分类导航 -->
    <CategoryList @category-click="handleCategoryClick" />

    <!-- 商家列表 -->
    <MerchantList :categoryId="selectedCategoryId" @merchant-click="handleMerchantClick" />
  </div>
</template>

<script setup>
import { ref } from 'vue'
import CategoryList from '../components/CategoryList.vue'
import MerchantList from '../components/MerchantList.vue'
import { useRouter } from 'vue-router'


const router = useRouter()
const selectedCategoryId = ref(null)

const handleCategoryClick = (categoryId) => {
  selectedCategoryId.value = categoryId
  // 跳转到商家列表页，这里可以根据分类ID筛选商家
  router.push({ name: 'Home', query: { category: categoryId } })
}

const handleMerchantClick = (merchantId) => {
  router.push({ name: 'Restaurant', params: { id: merchantId } })
}
</script>